<script setup lang="ts" name="userReport">
// userReport
import {computed, onMounted, ref, watch} from "vue";
import {report_list, report_find, meArticleEdit, meArticleDelete, report_handle} from "@/api/user"
import {usePage} from "@/plugins/pagination";
import {Message, Modal} from "view-ui-plus";
import {useStore} from "vuex";


let pagination = usePage();
let tabName = ref('be');
const store = useStore();
let USER_INFO = ref<any>(store.getters.getUserData);

let loading = ref(false);
let loading_model = ref(false);
let loading_submit = ref(false);
let showModal = ref(false);
let showHandle = ref(false);
const colBe = [
  {
    title: '被举报文章',
    key: 'title',
  },
  {
    title: '举报人',
    key: 'name',
  },
  {
    title: '状态',
    slot: 'status',
  },
  {
    title: '创建时间',
    key: 'create_time',
  },
  {
    title: '操作',
    slot: 'action',
    width: 160,
    fixed: 'right',
    align: 'center'
  }
];
const colMe = [
  {
    title: '举报文章',
    key: 'title',
  },
  {
    title: '被举报人',
    key: 'me_name',
  },
  {
    title: '状态',
    slot: 'status',
  },
  {
    title: '创建时间',
    key: 'create_time',
  },
  {
    title: '操作',
    slot: 'action',
    width: 160,
    fixed: 'right',
    align: 'center'
  }
];
let columns = ref(colBe);
let data = ref([]);
let formElement = ref();
let formValidate = ref<any>({
  title: '',
  name: '',
  create_time: '',
  screenshot: ''
});
let formHandle = ref<any>({
  status: 0,
});

let ruleHandle = ref({
  status: [
    {required: true, message: '请选择处理状态', trigger: 'change'}
  ],
});

const urlList = computed(() => {
  // 截图图片地址
  try {
    return formValidate.value.screenshot.split(',');
  } catch (e) {
    return formValidate.value.screenshot;
  }
})


const show = (id: any) => {
  // 查看 && 编辑
  showModal.value = true;
  loading_model.value = true;
  report_find(id).then((result) => {
    console.log(result)
    formValidate.value = {
      ...result.data
    };
    loading_model.value = false;
  })
}

const handle = (row: any) => {
  // 处理举报
  showHandle.value = true;
  formHandle.value = {...row};
}

// 移交管理员处理
const overAdmin = (row: any) => {

}

const onCancel = () => {
  // 关闭弹窗触发
  formValidate.value = {};
  formHandle.value = {};
}

const asyncOK = () => {
  // 处理举报
  formElement.value?.validate((valid) => {
    if (valid) {
      loading_submit.value = true;
      report_handle(formHandle.value).then((result: any) => {
        console.log(result)
        if (result.code == 200) {
          Message.success(result.data)
          showHandle.value = false;
          getList();
        } else {
          Message.error(result.data)
        }
      }).catch((err) => {
        loading_submit.value = false;
      })
    }
  })
}

const getList = () => {
  // 获取举报我的列表
  loading.value = true;
  let params = {
    ...pagination,
    type: tabName.value
  }
  report_list(params).then((result: any) => {
    console.log(result)
    data.value = result.data.data;
    pagination.total = result.data.total;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  })

}

watch(tabName, (value) => {
  console.log(value)
  if (value == "be") {
    columns.value = colBe;
  } else {
    columns.value = colMe;
  }
  getList();
})


onMounted(() => {
  getList();
})
</script>
<!--<script>-->
<!--export default {-->
<!--  name: 'userArticle'-->
<!--}-->
<!--</script>-->

<template>
  <div>
    <Tabs v-model="tabName">
      <TabPane label="被举报的" name="be"></TabPane>
      <TabPane label="我举报的" name="me"></TabPane>
    </Tabs>
    <Table border :columns="columns" :data="data" :loading="loading">
      <template #action="{ row, index }">
        <Space :size="10">
          <a size="small" @click="show(row.id)">查看</a>
          <a v-if="row.status == 0 && USER_INFO.user_id == row.me_id" size="small" @click="handle(row)">去处理</a>
          <a style="color:#ed4014;" v-if="row.status == 2 && USER_INFO.user_id != row.me_id" size="small"
             @click="overAdmin(row)">移交管理</a>
        </Space>
      </template>
      <template #status="{ row, index }">
        <Tag v-if="row.status == 0" color="warning">处理中</Tag>
        <Tag v-if="row.status == 1" color="success">已处理</Tag>
        <Tag v-if="row.status == 2" color="error">拒绝处理</Tag>
      </template>
    </Table>
    <Page style="margin-top: 10px;" :modelValue="pagination.pageNo" :total="pagination.total"
          @on-change="(e) => {pagination.pageNo = e;getList()}"
          show-total show-elevator/>
    <Modal
        loading
        width="60%"
        v-model="showModal"
        title="查看"
        @on-cancel="onCancel"
    >
      <div style="position: relative">
        <Spin fix v-if="loading_model"></Spin>
        <Form :model="formValidate" :label-width="100">
          <FormItem label="标题" prop="name">
            <Input v-model="formValidate.title" readonly placeholder="标题"></Input>
          </FormItem>
          <FormItem v-if="tabName == 'be'" label="举报人" prop="name">
            <Input v-model="formValidate.name" readonly placeholder="举报人"></Input>
          </FormItem>
          <FormItem v-else label="被举报人" prop="me_name">
            <Input v-model="formValidate.me_name" readonly placeholder="被举报人"></Input>
          </FormItem>
          <FormItem label="举报时间" prop="create_time">
            <Input v-model="formValidate.create_time" readonly placeholder="举报时间"></Input>
          </FormItem>
          <FormItem label="正文" prop="content">
            <Input type="textarea" v-model="formValidate.content" rows="4" readonly placeholder="正文"></Input>
          </FormItem>
          <FormItem label="截图" v-if="formValidate.screenshot" prop="content">
            <Space wrap>
              <template v-for="(url, index) in urlList" :key="url">
                <Image :src="url" fit="contain" width="200px" height="150px" preview :preview-list="urlList"
                       :initial-index="index"/>
              </template>
            </Space>
          </FormItem>
          <FormItem label="反驳" v-show="formValidate.status == 2" prop="content">
            <Input type="textarea" v-model="formValidate.contradict" rows="4" readonly placeholder="反驳"></Input>
          </FormItem>
        </Form>
      </div>
      <template #footer>
        <Space :size="20">
          <a @click="showModal=false">关闭</a>
        </Space>
      </template>
    </Modal>
    <Modal
        loading
        width="40%"
        v-model="showHandle"
        title="处理"
        @on-cancel="onCancel"
    >
      <div :class="{pointerNone: loading_submit}">
        <Spin v-if="loading_model"></Spin>
        <Form v-else ref="formElement" :model="formHandle" :rules="ruleHandle" :label-width="100">
          <FormItem label="是否处理" prop="status">
            <RadioGroup v-model="formHandle.status">
              <Radio label="1">已处理</Radio>
              <Radio label="2">未处理</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-show="formHandle.status == 2" label="反驳" prop="contradict">
            <Input type="textarea" rows="4" v-model="formHandle.contradict" placeholder="反驳正文"></Input>
          </FormItem>
        </Form>
      </div>
      <template #footer>
        <Space :size="20">
          <a @click="showHandle=false">取消</a>
          <Button @click="asyncOK" type="primary" :loading="loading_submit">保存</Button>
        </Space>
      </template>
    </Modal>
    <!--    <Button @click="takeScreenshot">截屏</Button>-->
  </div>
</template>

<style scoped lang="scss">
.pointerNone {
  pointer-events: none;
}
</style>
